<template>
  <div class="app-container">
    <!-- 货物详情 -->
    <div class="detail-title-box">
      <span>详情信息</span>
    </div>
    <el-form ref="queryParams" :model="queryParams" :rules="rules" label-width="120px" :inline="true"  v-show="showSearch" :label-position="labelPosition">
      <el-form-item label="条码" prop="bptm">
        <el-input
          v-model="queryParams.bptm"
          placeholder="请输入条码"
          clearable
            @keyup.enter.native="enterClick"
        />
      </el-form-item>
        <el-form-item label="柜号/批号" prop="spgh">
        <el-input
          v-model="queryParams.spgh"
          placeholder="请输入柜号/批号"
          clearable
            @keyup.enter.native="enterClick"
        />
      </el-form-item>
      <el-form-item label="入仓时间">
        <el-date-picker
          v-model="queryParams.ssrqid"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          @change="handleQuery"
          >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仓库" prop="spckmc">
        <el-input
          v-model="queryParams.spckmc"
          placeholder="请输入仓库"
          clearable
            @keyup.enter.native="enterClick"
        />
      </el-form-item>
        <el-form-item label="仓位" prop="ckcw">
        <el-input
          v-model="queryParams.ckcw"
          placeholder="请输入仓位"
          clearable
          @keyup.enter.native="enterClick"
        />
      </el-form-item>
      <el-form-item label="物品规格" prop="spzs">
        <el-input
          v-model="queryParams.spzs"
          placeholder="请输入物品规格"
          clearable
          @keyup.enter.native="enterClick"
        />
      </el-form-item>
      <el-form-item label="品牌" prop="spcd">
        <el-input
          v-model="queryParams.spcd"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="enterClick"
        />
      </el-form-item>
      <el-form-item >
        <el-checkbox label="显示所有历史记录" v-model="queryParams.ally3" true-label="1" @change="getList"></el-checkbox>
        <el-checkbox label="未设置单价货物" v-model="queryParams.danjia0" true-label="1" @change="getList"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleGoodsDetailsInput" v-hasPermi="['zhcloud:hwdb:modify']">提交担保</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button  type="primary" plain size="mini" @click="handleExportExcel" v-hasPermi="['zhcloud:hwdb:export']">导出为Excel</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button  type="primary" plain size="mini" @click="handleExport" :disabled="selection.length === 0" v-hasPermi="['zhcloud:hwdb:export']">导出</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      :data="goodsDetailsList"
      @selection-change="handleSelectionChange"
    >
      <af-table-column type="selection" width="50" align="center" />
      <af-table-column prop="zje" label="货物估值总价" fixed="left" :formatter="formatterZje"></af-table-column>
      <af-table-column prop="jine" label="货物估值单价" :formatter="formatterJine"></af-table-column>
      <af-table-column prop="sptm" label="用户条码"></af-table-column>
      <af-table-column prop="sptmc" label="仓库条码"></af-table-column>
      <af-table-column prop="spckmc" label="仓库"></af-table-column>
      <af-table-column prop="ckcw" label="仓位"></af-table-column>
      <af-table-column prop="spjs" label="件数"></af-table-column>
      <af-table-column prop="spjsl" label="单重(KG)"></af-table-column>
      <af-table-column prop="spsl" label="重量(吨)"></af-table-column>
      <af-table-column prop="spzs" label="物品规格"></af-table-column>
      <af-table-column prop="spcd" label="品牌"></af-table-column>
      <af-table-column prop="spgh" label="柜号"></af-table-column>
      <af-table-column prop="spbh" label="批号"></af-table-column>
      <af-table-column prop="allName" label="物品公司"></af-table-column>
      <af-table-column prop="ssrqid" label="入仓日期"></af-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { ListGoodsDetails, goodsDetailsInput } from "@/api/storage/guarantee";
import { NUMBER_DIDGIT, WEIGHT_DIGIT, AMOUNT_DIGIT } from '@/utils/constant'

export default {
  name: "guaranteeGoodsDetails",
  data() {
    return {
      //表格加载
      loading: true,
      //对齐
      labelPosition: "right",
      // 显示搜索条件
      showSearch: true,
      // 表单校验
      rules: {
      },
      // 查询参数
      queryParams: {
       	ally3: "",
        bptm: "",
        ckcw: "",
        danjia0: "",
        dbnum: "",
        isBa: "",
        khmcid: "",
        khpb: 0,
        shopId: 0,
        spcd: "",
        spckidis: [],
        spckmc: "",
        spgh: "",
        spzs: "",
        ssrqid: "",
        downloadType:"json"
      },
      //选中数据行
      selection:[],
      //页数
      pageSize: 10,
      //页码
      pageNum:1,
      // 总条数
      total: 0,
      //估价详情列表
      goodsDetailsList:[],
      //选择行数据id
      goodsDetailsInputData:[]
    };
  },
  beforeRouteEnter(to, from, next) {
    const query = to.query
    next(vm => {   
      if(Object.keys(query).length > 0) {
        vm.reset(vm)
        vm.queryParams.khmcid = query.id
        vm.getList()
      }
    })
  },
  methods: {
    /**获取估价列表 */
    getList() {
      this.loading=true
      ListGoodsDetails(this.queryParams,{pageNum:this.pageNum, pageSize:this.pageSize}).then(response => {
        this.goodsDetailsList = response.rows
        this.total = response.total;
        this.loading=false
      });
    },

    inputgoodsDetails() {
      this.$modal.loading("数据正在录入，请稍等...")
      goodsDetailsInput(this.goodsDetailsInputData).then(response => {
        this.getList()
        this.$modal.closeLoading()
      }).catch(()=> {
        this.$modal.closeLoading()
      });
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },

    /** 录入 */
    handleGoodsDetailsInput() {
      if(this.goodsDetailsInputData.length == 0) return this.$modal.msgError('请先选择录入数据!')
      this.$modal.confirm('货物提交担保后，请尽快设置估价，是否确认此操作？').then(() => {
        this.inputgoodsDetails();
      }).catch(() => {});
    },

    /** 导出为Excel */
    handleExportExcel() {
      this.download('/storage/hwdb/export', this.queryParams, `货物担保详情_${new Date().getTime()}.xlsx`)
    },

     /** 导出勾选数据*/
     handleExport() {
      if (this.selection.length > 0) {
        let option = {}
        option.fileName = '货物详情勾选数据'
        option.datas = [
          {
            sheetData: this.selection,//数据
            sheetName: 'sheet',
            //表头数据对应的sheetData数据
            sheetFilter: ['zje', 'jine', 'sptm', 'sptmc', 'spckmc', 'ckcw', 'spjs', 'spjsl', 'spsl', 'spzs',
             'spcd', 'spgh', 'allName', 'ssrqid'],
            sheetHeader: [
              //表头数据
              '货物估值总价', '货物估值单价', '用户条码', '仓库条码', '仓库', '仓位','件数', '单重(KG)','重量(吨)', '物品规格',
              '品牌','柜号','批号','物品公司','入仓日期'],
          }
        ]
        let excel = ExportJsonExcel(option)
        excel.saveExcel()
      } else {
        this.$modal.msgError('请勾选数据');
      }
    },

    //合计
    getSummaries({ columns, data }) {
      const sums = []
      columns.forEach((column, index) => {
        if(index === 0) {
          sums[index] = "合计"
			    return
        }
        if ((column.property === "spjs" || column.property === "spsl" || column.property === "jine")) {
          const values = data.map((item) => {
            return parseFloat(this.delcommafy(item[column.property]))
          });
          sums[index] = values.reduce((prev, curr) => {
            if(!prev) prev = 0
            if(!curr) curr = 0
            if(column.property === "spsl") {
              return parseFloat((prev + curr).toFixed(WEIGHT_DIGIT))
            }
            if(column.property === "spjs") {
              return parseFloat((prev + curr).toFixed(NUMBER_DIDGIT))
            }
            if(column.property === "jine") {
              return parseFloat((prev + curr).toFixed(AMOUNT_DIGIT))
            }
          }, 0);
        }
      })
      return sums
    },

     // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection = selection
      const selectionArr = []
      for(let i in selection) {
        selectionArr.push(selection[i].spbhid)
      }
      this.goodsDetailsInputData = selectionArr
    },
    // 表单重置
    reset() {
      Object.assign(this.$data, this.$options.data())
    },

    /** 货物估值总价空值*/
    formatterZje(row) {
      return row.zje?row.zje:0
    },

    /** 货物估值单价*/
    formatterJine(row) {
      return row.jine?row.jine:0
    },
       /**enter键触发 */
    enterClick(e) {
      this.getList()
    },
  }
};
</script>
